<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
			.cell{display:table-cell; text-align:center;vertical-align:middle;}
		</style>
	<style>
		#chartdiv1 {
		  	width: 100%;
		  	height: 280px;
			font-size: 11px;
		}
		#chartdiv2 {
		  	width: 100%;
		  	height: 280px;
			font-size: 11px;
		}
		#chartdiv3 {
			width: 100%;
			height: 280px;
			font-size: 11px;
		}
		</style>

	<script src="http://60.173.247.7:9009/RiverSystem/jslib/amcharts-3.14.5/amcharts.js "></script>
	<script src="http://60.173.247.7:9009/RiverSystem/jslib/amcharts-3.14.5/pie.js "></script>
	<script src="http://60.173.247.7:9009/RiverSystem/jslib/amcharts-3.14.5/serial.js "></script>
	<script src="http://60.173.247.7:9009/RiverSystem/jslib/amcharts-3.14.5/themes/light.js"></script>
	<script>
		AmCharts.makeChart( "chartdiv1", {
		  "type": "pie",
		  "theme": "light",
		  "dataProvider": [ {
		    "country": "违章搭建",
		    "litres": 48
		  }, {
		    "country": "非河道问题",
		    "litres": 15
		  }, {
		    "country": "其他",
		    "litres": 45
		  }, {
		    "country": "污水排放",
		    "litres": 73
		  }, {
		    "country": "养殖污染",
		    "litres": 36
		  }, {
		    "country": "工业废水",
		    "litres": 29
		  }, {
		    "country": "河涌垃圾",
		    "litres": 12
		  }, {
		    "country": "河道维养",
		    "litres": 28
		  }],
		  "valueField": "litres",
		  "titleField": "country",
		     "labelRadius": 0,
		     "radius":80,
		      "labelText": "[[title]]",
		   "balloon":{
		   "fixedPosition":true
		  }
		} );
		AmCharts.makeChart( "chartdiv2", {
		  "type": "pie",
		  "theme": "light",
		  "dataProvider": [ {
		    "country": "白云区",
		    "litres": 19
		  }, {
		    "country": "花都区",
		    "litres": 8
		  }, {
		    "country": "荔湾区",
		    "litres": 27
		  }, {
		    "country": "越秀区",
		    "litres": 12
		  }, {
		    "country": "黄埔区",
		    "litres": 15
		  }, {
		    "country": "从化区",
		    "litres": 13
		  }, {
		    "country": "增城区",
		    "litres": 12
		  }, {
		    "country": "天河区",
		    "litres": 34
		  }, {
		    "country": "海珠区",
		    "litres": 20
		  }, {
		    "country": "番禹区",
		    "litres": 80
		  }],
		  "valueField": "litres",
		  "titleField": "country",
		  "labelRadius": 0,
		     "radius":90,
		      "labelText": "[[title]]",
		   "balloon":{
		   "fixedPosition":true
		  }
		} );

		AmCharts.makeChart( "chartdiv3", {
		  "type": "serial",
		  "theme": "light",
		  "dataProvider": [ {
		    "country": "白云区",
		    "visits": 28
		  }, {
		    "country": "花都区",
		    "visits": 38
		  }, {
		    "country": "荔湾区",
		    "visits": 27
		  }, {
		    "country": "越秀区",
		    "visits": 15
		  }, {
		    "country": "黄埔区",
		    "visits": 20
		  }, {
		    "country": "从化区",
		    "visits": 34
		  }, {
		    "country": "增城区",
		    "visits": 27
		  }, {
		    "country": "天河区",
		    "visits": 31
		  }, {
		    "country": "海珠区",
		    "visits": 19
		  }, {
		    "country": "番禹区",
		    "visits": 32
		  }],
		  "valueAxes": [ {
		    "gridColor": "#FFFFFF",
		    "gridAlpha": 0.2,
		    "dashLength": 0
		  } ],
		  "gridAboveGraphs": true,
		  "startDuration": 1,
		  "graphs": [ {
		    "balloonText": "[[category]]: <b>[[value]]</b>",
		    "fillAlphas": 0.8,
		    "lineAlpha": 0.2,
		    "type": "column",
		    "valueField": "visits"
		  } ],
		  "chartCursor": {
		    "categoryBalloonEnabled": false,
		    "cursorAlpha": 0,
		    "zoomable": false
		  },
		  "categoryField": "country",
		  "categoryAxis": {
		    "gridPosition": "start",
		    "gridAlpha": 0,
		    "tickPosition": "start",
		    "tickLength": 20
		  }

		} );

</script>
</head>
<body>
<div  style="background-color: #E7E7E7; ">


	<table width="100%" border="0" style="text-align: center;background-color: #FFFFFF;">
		<tr>
			<td width="33%" style="padding-left: 20px;"><div  style="background-color: #0B73A9;width: 60px;height: 25px;" class="cell">全部</div></td>
			<td width="34%" style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">天河区</div></td>
			<td width="33%" style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">海珠区</div></td>
		</tr>
		<tr>
			<td style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">荔湾区</div></td>
			<td style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">越秀区</div></td>
			<td style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">白云区</div></td>
		</tr>
		<tr>
			<td style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">黄埔区</div></td>
			<td style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">增城区</div></td>
			<td style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">花都区</div></td>
		</tr>
		<tr>
			<td style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">从化区</div></td>
			<td style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">番禺区</div></td>
			<td style="padding-left: 20px;"><div  style="background-color: #FFFFFF;width: 60px;height: 25px;" class="cell">南沙区</div></td>
		</tr>
	</table>
	<div  style="height: 10px;width: 100%;"></div>

	<div  style="height: 280px;width: 100%;background-color: #FFFFFF;vertical-align: top;">
		<table style="width: 100%;">
			<tr><td colspan="2">
				<div >
					<div style="float: left;font-size: 14px;">问题分类统计</div>
					<div style="float: right; text-align: center; margin-left: 10px; border: solid 1px #01AAEB;border-radius: 5px;width: 80px;">

						<div style="padding-top: 3px; vertical-align: middle; border-right: solid 1px #01AAEB;border-bottom-left-radius: 5px;height:20px; display: inline-block; width: 49.5%;color: white;background-color: #01AAEB;font-size: 14px;">本周</div>

						<div style="margin-top: 0px;display: inline-block;width: 44%;font-size: 14px;vertical-align: middle;">本月</div>

					</div>
				</div>
			</td></tr>
			<tr>
				<td style="width: 30%;">
					<div>
						<div style="display: inline-block;height: 10px;width: 10px;background-color: #CC4748;border-radius: 5px;"></div>
						<span style="font-size: 12px;">&nbsp;污水排放 73</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 10px;background-color: #AE6F93;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;养殖污染 36</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 10px;background-color: #2F4074;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;工业废水29</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 10px;background-color: #448E4D;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;河涌垃圾 12</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 10px;background-color: #B7B83F;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;河道维养 28</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 10px;background-color: #4B859F;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;违章搭建 48</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 10px;background-color: #FDD400;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;非河道问题 15</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 10px;background-color: #84B761;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;其他 45</span>
						<br />
					</div>
				</td>
				<td >
					<div id="chartdiv1" ></div>
				</td>
			</tr>
		</table>

	</div>

	<div  style="height: 10px;width: 100%;"></div>
	<div  style="height: 280px;width: 100%;background-color: #FFFFFF;vertical-align: top;">
		<table style="width: 100%;">
			<tr><td colspan="2">
				<div >
					<div style="float: left;font-size: 14px;">投诉分类统计</div>

				</div>
			</td></tr>
			<tr>
				<td style="width: 25%">

					<div>
						<div style="display: inline-block;height: 10px;width: 20px;background-color: #67B7DC;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;白云区 19</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 20px;background-color: #FDD400;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;花都区 8</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 20px;background-color: #84B761;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;荔湾区 27</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 20px;background-color: #CC4748;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;越秀区 12</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 20px;background-color: #CD82AD;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;黄埔区 15</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 20px;background-color: #2F4074;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;从化区 13</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 20px;background-color: #448E4D;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;增城区 12</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 20px;background-color: #B7B83F;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;天河区 34</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 20px;background-color: #B9783F;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;海珠区 20</span>
						<br />
						<div style="display: inline-block;height: 10px;width: 20px;background-color: #B93E3D;border-radius: 5px;">

						</div>
						<span style="font-size: 12px;">&nbsp;番禹区 80</span>
						<br />
					</div>
				</td>
				<td>
					<div id="chartdiv2"></div>
				</td>
			</tr></table>

	</div>

	<div  style="height: 10px;width: 100%;"></div>
	<div  style="height: 250px;width: 100%;background-color: #FFFFFF;vertical-align: top;">

		<div id="chartdiv3"></div>
	</div>
</div>
</body>
</html>
